<template>
  <div>
    <Card>
      <span>
        <Tabs type="card">
          <TabPane :label="`保单:${$route.query.contno}`"></TabPane>
        </Tabs>
      </span>
      <div class="workStation" style="padding: 30px">
        <Timeline>
          <TimelineItem
            v-for="(item, index) in serviceRecord1"
            :key="index"
            :color="item.isSuccess == 'Y' ? 'green' : 'blue'"
          >
            <div>
              <Row gutter="10" class-name="Rowlayout">
                <i-col span="6">
                  <span>工作日期：</span>
                  <span>{{ item.visitDate }}</span>
                </i-col>
                <i-col span="6">
                  <span>工作方式：</span>
                  <span>{{ item.workTypeName }}</span>
                </i-col>
              </Row>
              <Row gutter="10" class-name="Rowlayout">
                <i-col span="6">
                  <span>处理人：</span>
                  <span>{{ item.reagentName ? item.reagentName : "" }}</span>
                  <Button
                    type="default"
                    size="small"
                    ghost
                    class="btnn"
                    shape="circle"
                  >
                    <span style="font-size: 12px; color: #1890ff">{{
                      item.role ? item.role : ""
                    }}</span>
                  </Button>
                </i-col>
              </Row>
              <Row gutter="24" class-name="Rowlayout">
                <i-col span="24">
                  <span>工作结果记录</span>
                  <span style="color: #00000073"
                    ><Button
                      class="btn"
                      ghost
                      size="small"
                      v-for="(i, index) in item.resultTag"
                      :key="index"
                      >{{ i }}</Button
                    ></span
                  >
                </i-col>
              </Row>
              <Row gutter="10" class-name="Rowlayout">
                <i-col span="6">
                  <span>{{ item.workResult }}</span>
                </i-col>
              </Row>
              <Row gutter="10" class-name="Rowlayout" v-if="item.netCount > 0">
                <i-col span="6">
                  <Button
                    type="success"
                    shape="circle"
                    size="small"
                    @click="interview(item)"
                    >网络联系图片</Button
                  >
                </i-col>
              </Row>
              <Row
                gutter="10"
                class-name="Rowlayout"
                v-if="item.phoneCount > 0"
              >
                <i-col span="6">
                  <Button
                    type="success"
                    shape="circle"
                    size="small"
                    @click="recorDing(item)"
                    >电话录音</Button
                  >
                </i-col>
              </Row>
              <Row gutter="10" class-name="Rowlayout">
                <i-col span="6">
                  <span>点评信息</span>
                </i-col>
              </Row>
              <Row gutter="24" class-name="Rowlayout">
                <i-col
                  span="24"
                  v-for="(itemStar, index) in item.comments || []"
                  :key="index"
                >
                  <span>{{ itemStar.agentname || "未知" }}点评</span>
                  <Rate v-model="itemStar.stars" disabled />
                  <span>{{ itemStar.commentdetail }}</span>
                  <Button
                    v-if="serviceReagentCode == itemStar.reagentcode"
                    type="error"
                    shape="circle"
                    size="small"
                    style="margin: 0px 15px"
                    @click="delectReview(itemStar)"
                    >删除</Button
                  >
                </i-col>
              </Row>
              <Row gutter="24" class-name="Rowlayout">
                <i-col span="15" calss-name="rowFlex">
                  <span>
                    <Rate v-model="item.value" />
                  </span>
                  <span>
                    <Input
                      v-model="item.commentdetail"
                      search
                      enter-button="提交"
                      placeholder="请输入点评内容"
                      style="width: 750px"
                      @on-search="suBmit(item,index)"
                      maxlength="200"
                    />
                  </span>
                </i-col>
              </Row>
            </div>
          </TimelineItem>
        </Timeline>
        <!-- 面访图片 -->
        <Modal
          footer-hide="true"
          :value="internetModal"
          :mask-closable="false"
          :closable="false"
          width="640"
          :styles="{ top: '200px' }"
        >
          <span slot="header" style="color: #fff; font-size: 14px"
            >网络联系图片</span
          >
          <Table :columns="internetColumns" :data="internetData" border>
            <template slot-scope="{ row }" slot="audio">
              <div @click="showFile(row)">
                <Icon
                  type="md-image"
                  v-if="row.icon == 'image'"
                  style="font-size: 20px"
                />
                <Icon
                  type="ios-paper"
                  v-if="row.icon == 'paper'"
                  style="font-size: 20px"
                />
              </div>
            </template>
            <template slot-scope="{ row }" slot="opration">
              {{ row.opration }}
              <Button
                type="success"
                size="small"
                style="
                  border-radius: 12px;
                  padding-left: 20px;
                  padding-right: 20px;
                "
                @click="downloadInternet(row)"
                >下载</Button
              >
            </template>
          </Table>
          <Button
            type="primary"
            @click="modalVisibleChange"
            style="float: right; margin-top: 20px"
            >返回</Button
          >
          <div class="clearBoth"></div>
        </Modal>
        <!-- 电话录音 -->
        <Modal
          footer-hide="true"
          :value="phoneRecord"
          :mask-closable="false"
          :closable="false"
          width="640"
          :styles="{ top: '200px' }"
        >
          <span slot="header" style="color: #fff; font-size: 14px"
            >电话录音下载</span
          >
          <Table :columns="phoneRecordColumns" :data="phoneRecordData" border>
            <template slot-scope="{ row }" slot="audio">
              <div @click="playOrPause(row)">
                <Icon
                  class="playBtn"
                  v-if="row.handleplayOrPause"
                  type="ios-pause"
                />
                <Icon class="playBtn" v-else type="ios-play" />
              </div>
            </template>
            <template slot-scope="{ row }" slot="opration">
              {{ row.opration }}
              <Button
                type="success"
                size="small"
                style="
                  border-radius: 12px;
                  padding-left: 20px;
                  padding-right: 20px;
                "
                @click="downloadPhoneRecord(row)"
                >下载</Button
              >
            </template>
          </Table>
          <Button
            type="primary"
            @click="modalVisibleChange"
            style="float: right; margin-top: 20px"
            >返回</Button
          >
          <div class="clearBoth"></div>
        </Modal>
      </div>
      <!-- 显示图片 -->
      <Modal
        footer-hide="true"
        v-model="handleShowFile"
        width="1200px"
        title="在线预览"
      >
        <img style="width: 100%; height: 100%" :src="biggerPath" alt=""  title="如需下载请右击"/>
      </Modal>
    </Card>
  </div>
</template>

<script>
import { exportFile, visitFile } from "../../../util/util";
export default {
  data() {
    return {
      biggerPath: "",
      serviceReagentCode: "",
      serviceRecord1: [],
      value: "",
      commentdetail: "",
      internetModal: false,
      phoneRecord: false,
      phoneRecordData: [],
      phoneRecordColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "fileName",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      internetData: [],
      internetColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "200",
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "fileName",
          width: "200",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      handleShowFile: false,
      handleplayOrPause:false,
      audioUrl:new Audio(),
      audioid:'',
      flag:'',
    };
  },
  methods: {
    queryVisitList() {
      let obj = {
        contno: this.$route.query.contno,
        paytodate: this.$route.query.paytodate,
      };
      this.api.queryVisitList(obj).then((res) => {
        if (res.code === 200) {
          this.serviceRecord1 = res.data;
          this.$Message.info(res.msg);
        }
      });
    },
    suBmit(item,index) {
      if (!item.commentdetail)
        return this.$Message.info("请输入点评内容再进行提交！");
      // console.log(item,index,"index");
      // return
      let obj = {
        contno: this.$route.query.contno,
        commentdetail: item.commentdetail,
        // reagentcode: this.$route.query.reagentCode,
        reagentcode: this.serviceReagentCode,
        stars: item.value, //星级
        visitid: this.serviceRecord1[index].visitId,
      };
      this.api.saveVisitInfoComment(obj).then((res) => {
        if (res.code === 200) {
          this.commentdetail = "";
          this.queryVisitList();
          item.value = "";
          // this.$Message.info(res.msg);
        }
      });
    },
    delectReview(item) {
      this.api
        .deleteVisitInfoComment({ commentid: item.commentid })
        .then((res) => {
          if (res.code === 200) {
            this.queryVisitList();
            // this.$Message.info(res.msg);
          } else {
            // this.$Message.info(res.msg);
          }
        });
    },
    interview(item) {
      this.internetModal = true;
      let obj = {
        visitid: item.visitId,
        worktype: "6",
      };
      this.api.queryPhonements(obj).then((res) => {
        if (res.code === 200) {
          this.internetData = res.data;
          this.internetData.forEach((item, index) => {
            let arr = item.fileName.split(".");
            let ext = arr[arr.length - 1];
            item.ext = ext;
            if (ext == "jpg" || ext == "png" || ext == "jpeg") {
              item.icon = "image";
            } else {
              item.icon = "paper";
            }
          });
        }
      });
    },
    recorDing(item) {
      this.phoneRecord = true;
      let obj = {
        visitid: item.visitId,
        worktype: "5",
      };
      this.api.queryPhonements(obj).then((res) => {
        if (res.code === 200) {
          this.phoneRecordData = res.data;
        }
      });
    },
    // 显示图片
    showFile(row) {
      if (row.ext == "jpg" || row.ext == "png" || row.ext == "jpeg") {
        this.biggerPath = row.url;
        this.handleShowFile = true;
      } else if (row.ext == "pdf") {
        let obj = {
          id: row.id,
          worktype: "visit",
        };
        visitFile("scrm-uer/api/fileDownload/downloadWork", obj);
      } else {
        this.$Message.info("该文件不支持在线预览，请下载到本地后打开");
      }
    },
    downloadInternet(row) {
      let obj = {
        id: row.id,
        worktype: "visit",
      };
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },
    modalVisibleChange() {
      this.phoneRecord = false;
      this.internetModal = false;
    },
    downloadPhoneRecord(row) {
      let obj = {
        id: row.id,
        worktype: "visit",
      };
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },
    playOrPause(data) {
      let arr = this.phoneRecordData
      this.phoneRecordData = []
      arr.forEach(item=>{
        if (data.id == item.id) {
          if (!item.handleplayOrPause) {
            this.audioUrl.src = item.url
            this.audioid = data.id
            this.audioUrl.play()
            item.handleplayOrPause = true
            this.audioUrl.onended = ()=>{
              this.overAudio()
            }
          }else{
            this.audioUrl.pause()
            item.handleplayOrPause = false
          }
        }else{
          item.handleplayOrPause = false
        }
        this.phoneRecordData.push(item)
      })
    },
    //播放完毕执行
    overAudio(){
      let arr = this.phoneRecordData
      this.phoneRecordData = []
      arr.forEach(item=>{
        if (this.audioid == item.id) {
          item.handleplayOrPause = false
        }
        this.phoneRecordData.push(item)
      })
    },
  },
  mounted() {
    this.serviceReagentCode = window.sessionStorage.getItem("useragentcode")
    this.queryVisitList();
  },
};
</script>
<style scoped lang="less">
// @import "../../businessManagement/workPool/index.less";
.biggerShow /deep/.ivu-modal-content {
  background-color: rgba(131, 80, 80, 0);
}
</style>

<style scoped lang="less">
// .workStation{
.Rowlayout {
  margin: 5px 0px;
  font-size: 12px;
}
/deep/ .ivu-col {
  display: flex !important;
  align-items: center !important;
}
/deep/ .btn {
  margin: 0 5px;
  color: #ff8d1a;
  border: #ff8d1a solid 1px;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
}
/deep/ .btnn {
  margin: 0 10px;
  font-size: 12px;
  border: #a0bfee solid 1px;
  height: 20px;
  line-height: 20px;
}
// }
</style>